<template>
	<van-nav-bar class="common-tabbar" fixed placeholder left-arrow left-text="商品列表" @click-left="back">

	</van-nav-bar>
	<div class="goodsTabbar">
		<div class="item" @click="changeSortType('default')">
			<span :class="{active:params.sort==='default'}">默认</span> <span class="iconfont icon-xiangxia1"
				:class="{active:params.sort==='default'}"></span>
		</div>
		<div class="item" @click="changeSortType('sell')">
			<span :class="{active:params.sort==='sell'}">销量</span> <span class="icon">
				<span class="iconfont icon-xiangxia1-copy"
					:class="{active:params.sort==='sell'&&params.sortType==='asc'}"></span>
				<span class="iconfont icon-xiangxia1"
					:class="{active:params.sort==='sell'&&params.sortType==='desc'}"></span>
			</span>
		</div>
		<div class="item" @click="changeSortType('price')">
			<span :class="{active:params.sort==='price'}"> 价格 </span> <span class="icon">
				<span class="iconfont icon-xiangxia1-copy"
					:class="{active:params.sort==='price'&&params.sortType==='asc'}"></span>
				<span class="iconfont icon-xiangxia1"
					:class="{active:params.sort==='price'&&params.sortType==='desc'}"></span>
			</span>
		</div>
	</div>
	<div class="contianer">

		<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false"
			@load="onLoad">
			<van-card v-for="item in list" @click="navTo('/goodsDetail?goodsId='+item._id)" :key="item._id" :num="item.total_sell_count" :price="item.price/100"
				:desc="item.name" :title="item.title" :thumb="item.goods_thumb" />


			<template #loading>
				<IconLoading></IconLoading>
			</template>
			<template #finished>
				没了
			</template>
		</van-list>
	</div>

</template>

<script setup>
	import IconLoading from '@/components/icons/IconLoading.vue'
	
	
	import {
		useRoute
	} from 'vue-router';

	import {
		reactive,
		ref,
		onActivated,
		onDeactivated
	} from 'vue';
	import {
		getGoodsList
	} from '@/api/goods.js'
	const route = useRoute()
	// "sort": "price", 
	// "sortType": "desc" ,
	// "pageSize": 10, 
	// "pageIndex": 1
	// category_ids
	let list = ref([])
	const loading = ref(false); //  是否正在加载   true  下边会有转圈UI  为true时不能进行新的请求
	const finished = ref(false); //  是否全部加载完毕  
	const params = reactive({
		"sort": "default",
		"sortType": "asc", // desc asc  
		"pageSize": 10,
		"pageIndex": 0,
		// "category_ids": ""
	})

	function onLoad() {
		params.pageIndex++; //  0 1  2
		
		console.log(1111)
		getGoodsList(params).then(res => {
			// list.value = res.rows   xxxxx错误

			list.value.push(...res.rows)

			// 加载状态结束
			loading.value = false;

			// 数据全部加载完成
			if (!res.hasMore) {
				// 如果没有跟多数据了 
				// 就表示结束了 finished =>true
				finished.value = true;
			}



		})

	}




		onLoad()

	function changeSortType(type) {
		params.pageIndex = 0;
		if (type === 'default') {
			params.sort = 'default'
		}
		if (type === 'sell') {
			// 上一个状态是不是也是销量  
			if (params.sort === 'sell') {
				params.sortType = params.sortType === 'asc' ? 'desc' : 'asc'
			}

			params.sort = 'sell'
		}

		if (type === 'price') {
			// 上一个状态是不是也是价格  
			if (params.sort === 'price') {
				params.sortType = params.sortType === 'asc' ? 'desc' : 'asc'
			}

			params.sort = 'price'
		}

		// console.log(params.sort)
		// console.log(params.sortType)
		loading.value = false
		finished.value = false
		list.value = []

		onLoad()
	}


</script>

<style>
	.goodsTabbar {
		height: 50px;
		display: flex;
		justify-content: space-around;
		align-items: center;

	}

	.goodsTabbar .item {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.goodsTabbar .item .icon {
		height: 24px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-left: 5px;

	}

	.goodsTabbar .item .iconfont {
		font-size: 8px;
	}

	.goodsTabbar .item .active {
		color: red;
	}
</style>